<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .form{display: flex;}
    .form .radio{display: inline-block;width: 20px;height: 20px;border: solid 1px #666;border-radius: 50%;}
    .form .radio[data-checked]::after{content: "";}
    .form .radio[data-checked=checked]::after{content: "√";}
  </style>
</head>
<body>
  <div class="form">
    <div class="radio" data-value="男" data-checked="checked"></div>男
    <div class="radio" data-value="女" data-checked=""></div>女
    <input type="button" value="确定" class="btn">
  </div>
  <input type="radio">
</body>
<script>
  // 使用html+css+js，模拟radio单选框

  var radios = document.querySelectorAll(".form .radio");
  var btn = document.querySelector(".form .btn");
  radioBox( radios );

  btn.onclick = function(){
    count( radios )
  }


  // 查找指定组的单选框的选中的值，并返回
  function count(eles){
    for(var i=0;i<eles.length;i++){
      if(eles[i].dataset.checked === "checked"){
        return eles[i].dataset.value;
      }
    }
  }

  function radioBox(eles){
    // 遍历传入的一组单选框
    for(var i=0;i<eles.length;i++){
      // 获取当前选中的单选框（如果不存在默认选中，那就是第0个）
      var prev = eles[i].dataset.checked === "checked" ? eles[i] : eles[0];
      // 绑定每个单选框的事件
      eles[i].onclick = function(){
        // 取消上一个单选框的选中
        prev.dataset.checked = "";
        // 给当前点击的单选框设置选中
        this.dataset.checked = "checked";
        // 将本次点击的单选框设置成下一次要取消的上一个
        prev = this;
      }
    }
  }

  // 总结：使用html+css+js模拟xxxxx

  // 第一步：要模拟的内容，写出来，观察布局，分析行为

  // 作业：html+css+js模拟select+option的下拉菜单
  
</script>
</html>